import React, { useState, useMemo } from 'react';
import { Title } from 'base/ctl/title';
import { utc_8, loc_tag, is_empty, export_csv_file, loc_date, urlTb, ge_date, filter_row, PanelFind, GridTable, Wait } from 'sui';
import { Sbtn } from 'base/ctl/base';
import { utc_offset } from './cmd';
import { DlgTm } from './ctl/ctl';

const TraceView = ({ high, wsn, hreturn }) => {
    const [filter, setFilter] = useState();
    const [open, setOpen] = useState(false);
    const [wait, setWait] = useState(false);
    const [main, setMain] = useState();

    const getRow = useMemo(() => {
        const lst = ["sn"];
        return filter_row(main, lst, filter);
    }, [main, filter]);

    const hExport = () => {
        const col = ["时间", "宽度值", "外圆值", "型号"];
        const dcol = ["time", "width", "dia", "tsn"];

        const row = [];

        if (is_empty(main)) {
            return;
        }

        main.forEach(d => {
            const tmp = [];
            dcol.forEach(k => tmp.push(d[k]));
            row.push(tmp);
        });

        const name = loc_tag();

        export_csv_file(name, col, row);
    };

    const findOpt = (opt) => {
        setWait(true);

        const cmd = {
            n: "real",
            obj: "*",
            opt: {
                desc: true,
                and: opt,
            }
        };

        urlTb(() => setWait(false), "get", cmd,
            r => {
                const data = r["real"]["data"];
                const utc = utc_offset();

                data.forEach((d, i) => {
                    d["index"] = i + 1;
                    d["time"] = utc_8(d["time"], utc);
                });

                setMain(data);
            },
            e => setMain(null));
    };

    const hfind = (d) => {
        let t = ge_date(d);
        findOpt([{ge: "time", v: t, utc: utc_offset()}]);
    };

    const htm = (v) => {
        const utc = utc_offset();

        const s = loc_date(v["start"]);
        const e = loc_date(v["end"]);

        findOpt([
            {ge: "time", v: s, utc: utc},
            {le: "time", v: e, utc: utc},
        ]);
    };

    const col = [
        {name: "序号", key: 'index', width: 70},
        {name: "时间", key: 'time', width: 300},
        {name: "宽度值", key: 'width', width: 300},
        {name: "外圆值", key: 'dia', width: 300},
        {name: "型号", key: 'tsn', width: 300},
    ];

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 mb-4 justify-between items-center">
                <div className="inline-flex items-center">
                    <Title value={wsn} sub="宽度与外圆 >> 查询" width="w-px-300"/>
                    <Sbtn cl="blue" label="当天" hcmd={() => hfind(0)} className="ml-8"/>
                    <Sbtn cl="blue" label="前两天" hcmd={() => hfind(1)} className="ml-8"/>
                    <Sbtn cl="blue" label="前三天" hcmd={() => hfind(2)} className="ml-8"/>
                    <Sbtn cl="blue" label="指定时间段" hcmd={() => setOpen(true)} className="ml-8" w="w-56"/>
                </div>
                <div className="inline-flex mr-4">
                    <Sbtn cl="blue" label="导出" hcmd={hExport}/>
                    <Sbtn cl="blue" label="返回" hcmd={hreturn}/>
                </div>
            </div>
            <PanelFind hcmd={v => setFilter(v)}/>
            <GridTable high={high} col={col} row={getRow}/>
            <DlgTm open={open} setOpen={setOpen} hcmd={htm}/>
            <Wait wait={wait}/>
        </div>
    );
};

export {TraceView};
